<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Home</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/css/ready.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <link rel="stylesheet" href="assets/layer/layer/theme/default/layer.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="angularjs/angular.min.js"></script>
    <script src="../homePage/layer/layer.js"></script>
</head>
<style type="text/css">
    .main-panel {
        background-color: #FFFFFF !important;
    }

    .content {
        background-color: #FFFFFF !important;
    }
</style>
<script>
  var promp=null;
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope, $http) {
        let user = sessionStorage.getItem("user");
        $scope.userid = JSON.parse(user).userid;
        $scope.name = JSON.parse(user).username;
        //初始化方法
        $scope.myinit = function(){
            $http.get("http://localhost:8002/tuser/showinfo/"+$scope.userid).success(function (data) {
                $scope.user = data.data;
                $scope.userinfo();
                $scope.searchcard();
            })
        }
        $scope.userinfo = function(){
            $http.get("http://localhost:8002/tuser/userinfo/"+$scope.userid).success(function (data) {
                $scope.uinfo = data.data;
            })
        }
        $scope.searchcard = function(){
            $http.get("http://localhost:8002/bank/selectAllBank/"+$scope.userid).success(function (data) {
                $scope.allbank = data.data;


            })
        }
        //发送邮箱验证码
        $scope.getCode = function () {
            $http.get("http://localhost:8002/mails/getCode?to=" + $scope.email).success(function (data) {
                if (data.code == 0) {
                    layer.msg(data.msg, {icon: 6});
                }else if (data.code == -1) {
                    layer.msg(data.msg, {icon: 5});
                }
            });
        };
        //修改邮箱
        $scope.update = function () {
            //得到输入的邮箱
            var emailnum = $scope.email;
            var mycode = $scope.mycode;
            //邮箱的正则
            var emailpattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if (emailnum == "" || emailnum == null) {
                promp = layer.msg("邮箱不能为空");
            } else if (emailpattern.test(emailnum) == false) {
                promp = layer.msg("输入的邮箱不符合规范");
            } else if (mycode == null || mycode == "") {
                promp = layer.msg("输入的验证码不能为空");
            } else {
            $http.get("http://localhost:8002/mails/updateMail?to=" + emailnum + "&code=" + mycode + "&userid=" + $scope.userid).success(function (data) {
                if (data.code == 0) {
                    layer.msg(data.msg, {icon: 6});
                } else if (data.code == 101) {
                    layer.msg(data.msg, {icon: 5});
                } else if (data.code == 304) {
                    layer.msg(data.msg, {icon: 5});
                }
            });
        }
        };
        //发送短信验证码
        $scope.sendMsgCode = function () {

            $http.get("http://localhost:8002/tuser/getvcode/"+$scope.newphone).success(function (data) {
                if (data.code == 200){
                    layer.msg(data.msg,{icon:6})
                } else{
                    layer.msg(data.msg,{icon:5})
                }
            })
        }
        //修改手机号
        $scope.updatetel = function () {
            //指定手机号的正则
            var phonepattern = /^1[3456789]\d{9}$/;
            //得到输入的手机号
            var phonenum = $scope.newphone;
            //得到输入的验证码
           var code= $scope.vcode;
            if (phonenum == "" || phonenum == null) {
                promp = layer.msg("输入的手机号不能空");
            } else if (phonepattern.test(phonenum)==false) {
                promp = layer.msg("输入的手机号不符合规范");
            } else if (code==""||code==null){
                promp = layer.msg("输入的验证码不能为空");
            }else {
            $http.get("http://localhost:8002/tuser/updateTel/" + $scope.userid + "/" + phonenum + "/" + code).success(function (data) {
                if (data.code == 200) {
                    layer.msg(data.msg, {icon: 6})
                } else if (data.code == 404) {
                    layer.msg(data.msg, {icon: 5})
                } else {
                    layer.msg(data.msg, {icon: 5})
                }
            })
        }
        }
        //设置用户名/修改用户名
        $scope.updateUsername = function () {
            //得到输入的用户名
            var uname=$scope.username;
            //指定规范，只能包括数字字母的组合，长度为4-16位
            var uPattern = /^[A-Za-z0-9]{4,15}$/;
            if (uname==""||uname==null){
                promp=layer.msg("输入的用户名不能为空");
            }else if (uPattern.test(uname)==false) {
                promp=layer.msg("输入的用户名不符合规定");
            }else {
                $http.get("http://localhost:8002/tuser/updateUsername/" + $scope.userid + "/" + uname).success(function (data) {
                    if (data.code == 200) {
                        sessionStorage.setItem("user",JSON.stringify(data.data))
                        layer.msg(data.msg, {icon: 6})
                        window.location.href="../myCenter/update.html"
                    } else if (data.code == 300) {
                        layer.msg(data.msg, {icon: 5})
                    }else{
                        layer.msg(data.msg, {icon: 5})
                    }
                })
            }
        }
        //绑定银行卡
        $scope.bindcard = function () {
            //得到输入的银行卡账号
            var cardid=$scope.bankcard;
            var cardname = $("#bankname").val()
            var userid =$scope.userid
            //银行卡为19位数字
        var cardidpattern=/^([1-9]{1})(\d{14}|\d{18})$/;
        if (cardid==""||cardid==null || cardname == "" ||cardname== null){
            promp=layer.msg("银行卡和所属银行不能为空");
        }
        else if (cardidpattern.test(cardid)==false){
            promp=layer.msg("输入的银行卡不符合规范");
        } else {

            $http.get("http://localhost:8002/bank/bindCard/"+userid+"/"+cardid+"/"+cardname).success(function (data) {
                if (data.code == 200) {
                    layer.msg(data.msg, {icon: 6})
                    $("#bankname").val("0")
                    $("#bankcard").val("")
                    $scope.myinit()
                } else {
                    layer.msg(data.msg, {icon: 5})
                }
            })
        }
        }
        //解绑银行卡
        $scope.delbankcard = function(bankcard){
            $http.get("http://localhost:8002/bank/delbankcard/"+bankcard).success(function (data) {
                if (data.code == 200){
                    layer.msg(data.msg,{icon:6})
                    $scope.myinit();
                } else{
                    layer.msg(data.msg,{icon:5})
                }
            })
        }
        //退出登录
        $scope.quiet =function () {
            sessionStorage.clear()
            window.location.href = "../homePage/index.html";
        }

    });
</script>
<body>
<div class="wrapper" ng-app="myApp" ng-controller="myCtrl" ng-init="myinit()">
    <div class="main-header">
        <div class="logo-header">
            <a href="index.html" class="logo">
                <img src="../homePage/img/logo.png" style="height: 40px;width: 100px">个人中心
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse"
                    data-target="collapse"
                    aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
        </div>
        <nav class="navbar navbar-header navbar-expand-lg">
            <div class="container-fluid">
                <a href="../homePage/index.html" style="color: #000000; font-size: 16px;">返回首页</a>

                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
                    <li class="nav-item dropdown">当前用户:
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <span>{{name}}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <div class="user-box">
                                    <div class="u-text">
                                        <h4>{{name}}</h4>
                                        <p class="text-muted">{{uinfo.email}}</p>
                                        <a ng-click="quiet()" class="btn btn-rounded btn-danger btn-sm">退出登录</a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="sidebar">
        <div class="scrollbar-inner sidebar-wrapper">
            <div class="user">
                <div class="info">
                    <a class="" data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>

									<span class="user-level">修改信息</span>
									<!-- <span class="badge badge-count">未实名</span> -->
									<span class="caret"></span>
								</span>
                    </a>
                    <div class="clearfix"></div>

                    <div class="collapse in" id="collapseExample" aria-expanded="true" style="">
                        <ul class="nav">
                            <li>
                                <a href="password.html">
                                    <span class="link-collapse">修改密码</span>
                                </a>
                            </li>
                            <li>
                                <a href="authentication.html">
                                    <span class="link-collapse">实名认证</span>
                                </a>
                            </li>
                            <li>
                                <a href="update.html">
                                    <span class="link-collapse">编辑资料</span>
                                </a>
                            </li>
                            <li>
                                <a href="gobindcar.html">
                                    <span class="link-collapse">绑定车辆</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul class="nav">
                <li class="nav-item ">
                    <a href="home.html">
                        <i class="la la-fonticons"></i>
                        <p>首页管理</p>
                        <!-- <span class="badge badge-count">5</span> -->
                    </a>
                </li>
                <li class="nav-item">
                    <a href="myOrder.html">
                        <i class="la la-dashboard"></i>
                        <p>我的订单</p>
                        <!-- <span class="badge badge-count">5</span> -->
                    </a>
                </li>
                <li class="nav-item">
                    <a href="guarantee.html">
                        <i class="la la-table"></i>
                        <p>我的保单</p>
                        <!-- <span class="badge badge-count">14</span> -->
                    </a>
                </li>
                <li class="nav-item">
                    <a href="claim.html">
                        <i class="la la-keyboard-o"></i>
                        <p>我的理赔</p>
                        <!-- <span class="badge badge-count">50</span> -->
                    </a>
                </li>
                <li class="nav-item">
                    <a href="bindcar.html">
                        <i class="la la-th"></i>
                        <p>我的车辆</p>
                        <!-- <span class="badge badge-count">6</span> -->
                    </a>
                </li>
                <li class="nav-item">
                    <a href="applyclaim.html">
                        <i class="la la-th"></i>
                        <p>申请理赔</p>
                        <!-- <span class="badge badge-count">6</span> -->
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <h4 class="page-title">我的资料</h4>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">设置/修改</div>
                            </div>
                            <div class="card-body">
                                <div class="form-group col-md-6">

                                    <label>用户名:</label>
                                    <input type="text" class="form-control" ng-model="username" id="username" placeholder="{{name}}">
                                    <span style="color: red">用户名只能包括数字或字母的组合，长度为4-16位</span>
                                </div>
                            </div>
                            <div class="card-action text-center">
                                <button ng-click="updateUsername()" class="btn btn-success">提交编辑</button>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title text-center">银行卡</div>
                            </div>
                            <div class="card-body" ng-repeat="bank in allbank">
                                <div class="card bg-light">
                                    <div class="card-header  text-center" >{{bank.bankname}}</div>
                                    <div class="card-body">
                                        <div class="form-group  text-center">
                                            <span class="backNum">{{bank.bankcard}}</span>
                                    </div>
                                    </div>
                                    <div class="card-footer text-center">
                                        <button ng-click="delbankcard(bank.bankcard)" class="btn btn-danger">解绑</button>
                                    </div>
                                </div>

                            </div>
                            <div class="card-action">


                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">更改/绑定</div>
                            </div>
                            <div class="card-body">
                                <div class="card">
                                    <div class="card-header bg-light">手机号绑定</div>
                                    <div class="card-body">
                                        <div class="form-group col-md-6">
                                            <label for="newphone">手机号:</label>
                                            <input type="text" class="form-control" id="newphone" ng-model="newphone"
                                                   placeholder="{{user.usertel}}">

                                        </div>
                                        <div class="form-group col-md-3">
                                            <label for="code">短信验证码:</label>
                                            <input id="code" ng-model="vcode" class="form-control" type="text">&nbsp;<a
                                                class="btn btn-info" ng-click="sendMsgCode()">获取验证码</a>
                                        </div>
                                        <div>
                                            <button type="button" id="updatetel"ng-click="updatetel()" class="btn btn-success form-control">
                                                确认绑定
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="card">
                                    <div class="card-header bg-light">邮箱绑定</div>
                                    <div class="card-body">
                                        <div class="form-group col-md-6">
                                            <label for="email">邮箱:</label>
                                            <input type="text" class="form-control" ng-model="email" id="email"
                                                   placeholder="{{uinfo.email}}">
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label for="emailcode">邮箱验证码:</label>
                                            <input id="emailcode" ng-model="mycode" class="form-control"  type="text">&nbsp;<a
                                                ng-click="getCode()" class="btn btn-info">获取验证码</a>
                                        </div>
                                        <div>
                                            <button type="submit" ng-click="update()" class="btn btn-success form-control">确认绑定</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="card">
                                    <div class="card-header bg-light">银行卡绑定</div>
                                    <div class="card-body ">
                                        <div class="form-group col-md-7 ">
                                            <label>所属银行：</label>
                                            <select id="bankname" class="form-control">
                                                <option value="0">--仅支持绑定以下银行--</option>
                                                <option value="中国邮政储蓄银行">中国邮政储蓄银行</option>
                                                <option value="中国工商银行">中国工商银行</option>
                                                <option value="中国建设银行">中国建设银行</option>
                                                <option value="中国农业银行">中国农业银行</option>
                                                <option value="招商银行">招商银行</option>
                                                <option value="中国银行">中国银行</option>
                                                <option value="交通银行">交通银行</option>
                                                <option value="民生银行">民生银行</option>
                                                <option value="中信银行">中信银行</option>
                                                <option value="光大银行">光大银行</option>
                                                <option value="兴业银行">兴业银行</option>
                                                <option value="平安银行">平安银行</option>
                                                <option value="浦发银行">浦发银行</option>
                                            </select>
                                            </br>
                                            <label for="bankcard">银行卡号:</label>
                                            <input type="text" class="form-control" ng-model="bankcard" id="bankcard" placeholder="请输入银行卡号">
                                            <!--<label for="bankcard">所属银行:</label>-->
                                            <!--<input type="text" class="form-control" ng-model="bankcardname" id="bankcardname" placeholder="请输入银行卡所属银行">-->
                                        </div>
                                        <div>
                                            <button ng-click="bindcard()" class="btn btn-success form-control">确认绑定</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <footer class="footer">
            <div class="container-fluid">
                <nav class="pull-left">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                ThemeKita
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Help
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#license/#free-item">
                                Licenses
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="copyright ml-auto">
                    Copyright &copy; 2020 无忧车险责任有限公司
                </div>
            </div>
        </footer>
    </div>
</div>
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/chartist/chartist.min.js"></script>
<script src="assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<script src="assets/js/demo.js"></script>
</html>
